<template>
  <div>
    <el-row class="question-row">
      <el-col :span="2"><b>考试ID:</b>{{ question.id }}</el-col>
      <el-col :span="5">
        <b>考试名称：</b> {{ question.exam_name }}
        <el-link
          class="question-name"
          @click="showInfo(question)"
          type="primary"
          v-html="question.question"
        ></el-link>
      </el-col>
      <el-col :span="5"><b>归属学科:</b>{{ question.subject_name }} </el-col>
      <el-col :span="5"><b>归属目录:</b>{{ question.directory_name }} </el-col>
    </el-row>
    <el-row class="question-row">
      <el-col :span="3"
        ><b>考试类型:</b
        >{{ question.exam_type === 1 ? "阶段考核" : "综合考试" }}
      </el-col>
      <el-col :span="3"
        ><b>考试方式:</b>
        {{ question.lock_screen === 1 ? "不锁屏" : "锁屏" }}
      </el-col>
      <el-col :span="4"
        ><b>创建人:</b>
        {{ question.create_name }}
      </el-col>
      <el-col :span="4"
        ><b>创建时间:</b>{{ question.created_at | formatTime }}
      </el-col>
      <el-col :span="4"
        ><b>试卷信息:</b>
        <el-link type="primary" :underline="false">
          <el-tag
            size="small"
            @click="openPaper(question.main_paper_name, question.main_paper_id)"
            >点击查看</el-tag
          ></el-link
        >
      </el-col>
      <el-col :span="6"
        ><b>推送班级信息:</b>
        <el-link
          type="primary"
          :underline="false"
          v-if="question.exam_bind_class.length"
        >
          <el-tag size="small" @click="openClass(question.exam_bind_class)"
            >点击查看</el-tag
          ></el-link
        >
        <span v-else>暂无</span>
      </el-col>
    </el-row>
    <el-dialog
      title="考试试卷信息"
      :visible.sync="dialogVisible"
      width="30%"
      v-if="dialogVisible"
     
    >
      <span>
        &nbsp;&nbsp; 主考试卷：
        <el-link type="primary" @click="zhanshi" :underline="false">{{
          paperName
        }}</el-link></span
      >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="已推送信息"
      :visible.sync="dialogVisible2"
      width="70%"
      :before-close="handleClose"
    >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="class_name" label="班级名称" width="180">
        </el-table-column>
        <el-table-column label="考试状态">
          <template>
            <el-link type="primary" :underline="false">主考:</el-link>待设定时间
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="cancel(scope.row.class_id, scope.row.exam_id)"
              >解除绑定</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible6" width="70%" v-if="dialogVisible6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>试卷名称: {{ paperData.paper_name }}</span>
        </div>
        <el-row>
          <el-col :span="6">归属学科：{{ paperData.subject_name }}</el-col>
          <el-col :span="6">归属目录：{{ paperData.directory_name }}</el-col>
          <el-col :span="6"
            >试卷状态：<el-tag v-if="paperData.show_state === 1" type="success"
              >启用</el-tag
            ><el-tag v-else type="info">禁用</el-tag>
          </el-col>
          <el-col :span="6"
            >试卷类型：{{
              paperData.paper_type === 1 ? "模拟卷" : "真题卷"
            }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6"
            >试卷难度：<span v-if="paperData.difficulty === 1">简单</span
            ><span v-else-if="paperData.difficulty === 2">中等</span
            ><span v-else>较难</span></el-col
          >
          <el-col :span="6">试卷题型：{{ qt }}</el-col>
          <el-col :span="6">试卷总分：{{ paperData.total_score }}</el-col>
          <el-col :span="6">及格分数：{{ paperData.pass_score }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">创建人：{{ paperData.create_name }}</el-col>
          <el-col :span="6"
            >创建时间：{{ paperData.created_at | formatTime }}</el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-table
          :data="tData"
          border
          style="width: 100%"
          empty-text="请勾选试卷包含题型，从而生成选题模板"
        >
          <el-table-column prop="name" align="center" label="题型" width="150">
          </el-table-column>
          <el-table-column label="选题信息">
            <template slot-scope="scope">
              <el-row>
                共 &nbsp;
                <el-input
                  style="width: 70px"
                  size="small"
                  v-model="scope.row.num"
                  placeholder="0"
                ></el-input>
                题,每题
                <el-input
                  style="width: 70px"
                  size="small"
                  v-model="scope.row.score"
                  placeholder="0"
                ></el-input
                >分,已选题数: &nbsp; &nbsp;<el-link
                  type="primary"
                  :underline="false"
                  >{{ num(scope.row.type) }}</el-link
                >
                题
                <el-button
                  size="small"
                  type="success"
                  @click="look(scope.row.type)"
                  >看题</el-button
                >
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
       <el-dialog
      :visible.sync="dialogVisible8"
      width="70%"
      :before-close="handleClose"
      v-if="dialogVisible8"
    >
      <div slot="title" class="clearfix">
        <span>试题</span>
      </div>
      <question-list-look
        ref="questLook"
        :selectList="multipleSelection"
        :quest_type="q_type"
        @confirm="confirm"
      ></question-list-look>
    </el-dialog>
  </div>
</template>

<script>
import { cancelBindClass, getExamPaper } from "@/api/exam/question";
import QuestionListLook from "@/components/QuestionListLook"
export default {
  name: "ExamItem",
  props: {
    question: {
      type: Object,
      require: true,
    },
  },
  components: {
    QuestionListLook,
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible6: false,
      dialogVisible8:false,
      paperName: "",
      paperId: "",
      multipleSelection:[],
      tableData: [],
      paperData: {},
      qt: "",
      tData: [],
    };
  },
  methods: {
    openPaper(name, id) {
      console.log(name);
      this.paperName = name;
      this.paperId = id;
      this.dialogVisible = true;
    },
    openClass(examClass) {
      this.tableData = examClass;
      this.dialogVisible2 = true;
    },
    handleClose(done) {
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     done();
      //   })
      //   .catch((_) => {});
    },
    cancel(class_id, exam_id) {
      this.$confirm("确认解绑？")
        .then(async (_) => {
          const res = await cancelBindClass({
            class_id,
            exam_id,
            del: true,
          });
          this.$emit("iniData");
          this.dialogVisible2 = false;
          this.$message.success("解绑成功");
        })
        .catch((_) => {});
    },
    async zhanshi() {
      console.log(this.paperId);

      let { data } = await getExamPaper(this.paperId);
      this.paperData = data;
      this.multipleSelection = data.question_data;
      this.tData = JSON.parse(data.check_question_list);
      console.log(data);
      this.paperData.quest_type = JSON.parse(data.quest_type);
      console.log(this.paperData.quest_type);
      this.questType();
      this.dialogVisible6 = true;
    },
    questType() {
      let typeList = [];

      if (this.paperData.quest_type.includes(1)) {
        typeList.push("单选题");
      }
      if (this.paperData.quest_type.includes(2)) {
        typeList.push("多选题");
      }
      if (this.paperData.quest_type.includes(3)) {
        typeList.push("判断题");
      }
      if (this.paperData.quest_type.includes(4)) {
        typeList.push("简单题");
      }
      this.qt = typeList.join(",");
    },
    look() {
      this.dialogVisible8 = true;

      this.q_type = type;
    },
  },
  computed: {
    num() {
      return function (type) {
        if (type === 1) {
          let lll = this.multipleSelection.filter(
            (item) => item.quest_type === 1
          );
          return lll.length;
        }
        if (type === 2) {
          let lll = this.multipleSelection.filter(
            (item) => item.quest_type === 2
          );
          return lll.length;
        }
        if (type === 3) {
          let lll = this.multipleSelection.filter(
            (item) => item.quest_type === 3
          );
          return lll.length;
        }
        if (type === 4) {
          let lll = this.multipleSelection.filter(
            (item) => item.quest_type === 4
          );
          return lll.length;
        }
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.question-row {
  line-height: 30px;
}
.question-row b {
  color: #aaa;
  font-weight: normal;
  margin-right: 5px;
}
.question-name {
  height: 20px;
  overflow: hidden;
}
</style>
